<template>
  <div class="main-container">
    <div style="background-color: #fff; height: 100%">
      <a-tabs :lazy-load="true" justify type="card" :default-active-key="active">
        <a-tab-pane key="1" title="待处理">
          <div style="height: 100%">
            <Pending></Pending>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="已处理">
          <div style="height: 100%">
            <Processed></Processed>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import { useRoute } from 'vue-router'
  import { ref } from 'vue'
  import Pending from './Pending.vue'
  import Processed from './Processed.vue'
  export default {
    name: 'ReturnGrayInStock',
    setup() {
      const route = useRoute()

      const active = ref('1')
      if (route.query.key) {
        active.value = route.query.key + ''
      }
      return {
        active,
      }
    },
    components: { Pending, Processed },
  }
</script>

<style scoped>
  .main-container {
    height: 100%;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
</style>
